'use client'

import { useState } from 'react'
import StoryGenerator from '@/components/StoryGenerator'
import Header from '@/components/Header'
import Footer from '@/components/Footer'

export default function Home() {
  return (
    <div className="min-h-screen flex flex-col">
      <Header />
      <main className="flex-1 container mx-auto px-4 py-8">
        <div className="max-w-4xl mx-auto">
          <div className="text-center mb-12">
            <h1 className="text-4xl font-bold text-gray-900 mb-4">
              AI英语绘本生成器
            </h1>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto mb-6">
              使用人工智能为您创作阳光积极、充满正能量的英语绘本小故事，
              包含精美插图和生动的卡通漫画，让故事更加有趣易懂。
            </p>
            <div className="flex justify-center space-x-4">
              <a 
                href="/demo"
                className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
              >
                查看卡通漫画演示
              </a>
                            <a
                href="/test-openai"
                className="inline-flex items-center px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors"
              >
                测试OpenAI插图生成
              </a>
              <a
                href="/test-image-search"
                className="inline-flex items-center px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
              >
                测试图片搜索功能
              </a>
            </div>
          </div>
          <StoryGenerator />
        </div>
      </main>
      <Footer />
    </div>
  )
} 